<!--
 * @Author: gao_m3
 * @Date: 2020-09-18 10:12:57 
 * @LastEditTime: 2022-04-18 11:22:04
 * @Descripttion: 登录策略
-->
<template>
  <div class="pw-container">
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <i class="fks-title-icon" />
          <span>{{ LANG.LOGIN_STRATEGY }}</span>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <span
              >{{ LANG.ERROR_NUM }}
              <fks-tooltip placement="right">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.LOCK_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </span>

            <div>
              <fks-input-number v-model="form.loginErrorLockNum" :min="0" />
              <span style="margin-left: 20px">{{ LANG.TIMES }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <span>{{ LANG.LOCK_TIME }}</span>
            <div>
              <fks-input-number v-model="form.loginErrorLockTime" :min="0" />
              <span style="margin-left: 6px">{{ LANG.MINUTE }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span
                >{{ LANG.LOGIN_CAPTCHA }}
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.CAPTCHA_TIP }}
                  </div>
                  <i class="fks-icon-question" />
                </fks-tooltip>
              </span>
            </div>
            <fks-switch v-model="form.useCaptcha" class="drawer-switch" />
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span>{{ LANG.CAPTCHA_TYPE }} </span>
            </div>
            <fks-select
              v-model="form.captchaType"
              :placeholder="LANG.PLEASE_SELECT"
              style="width: 280px"
              :readonly="!form.useCaptcha"
            >
              <fks-option
                v-for="{ label, value } in captchaTypes"
                :key="value"
                :label="label"
                :value="value"
              />
            </fks-select>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>{{ LANG.ENABLE_STRATEGY }}</div>
            <div>
              <fks-input-number
                v-model="form.errorCount"
                :min="1"
                :max="form.loginErrorLockNum - 1"
              />
              <span style="margin-left: 20px"> {{ LANG.TIMES }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span
                >{{ LANG.FA }}
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.FA_TIP }}
                  </div>
                  <i class="fks-icon-question" />
                </fks-tooltip>
              </span>
            </div>
            <fks-switch v-model="form.secondFA" class="drawer-switch" />
          </div>
        </div>
      </fks-col>
    </fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <i class="fks-title-icon" />
          <span>{{ LANG.SESSION }}</span>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>
              <span
                >{{ LANG.ACCESS_EXPIRATION }}
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.ACCESS_TIP }}
                  </div>
                  <i class="fks-icon-question" />
                </fks-tooltip>
              </span>
            </div>
            <div>
              <fks-input-number
                v-model="form.accessTokenValidity"
                :min="5"
                :max="43200"
              />
              <span style="margin: 0 6px">{{ LANG.MINUTE }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span
                >{{ LANG.SESSION_EXPIRATION }}
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.SESSION_TIP }}
                  </div>
                  <i class="fks-icon-question" />
                </fks-tooltip>
              </span>
            </div>
            <div>
              <fks-input-number
                v-model="form.sessionValidTime"
                :min="5"
                :max="form.accessTokenValidity"
              />
              <span style="margin: 0 6px">{{ LANG.MINUTE }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span>
                {{ LANG.MULTI_DEVICE }}
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.DEVICE_TIP }}
                  </div>
                  <i class="fks-icon-question" /> </fks-tooltip
              ></span>
            </div>
            <fks-switch v-model="form.deviceMultiple" class="drawer-switch" />
          </div>
        </div>
      </fks-col>
    </fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <i class="fks-title-icon" />
          <span>{{ LANG.LOGIN_WAY }}</span>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <span>{{ LANG.PHONE }}</span>
            <fks-switch v-model="form.phone" class="drawer-switch" />
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span
                >{{ LANG.EXTRA }}
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.EXTRA_TIP }}
                  </div>
                  <i class="fks-icon-question" />
                </fks-tooltip>
              </span>
            </div>
            <fks-switch
              v-model="form.extraWay"
              class="drawer-switch"
              @change="changeExtraWay"
            />
          </div>
          <fks-divider />
          <div v-if="form.extraWay" class="extra">
            <div v-for="tag in extraDicData" :key="tag.code">
              <div class="row-content">
                <div>
                  <fks-icon
                    :icon-class="tag.code"
                    style="
                      width: 1rem;
                      height: 24px;
                      margin-right: 8px;
                      margin-bottom: 3px;
                      line-height: 24px;
                    "
                  />
                  <span style="cursor: pointer" @click="editExtra(tag)">
                    {{ tag[$lang] }}
                  </span>
                </div>
                <fks-switch
                  v-model="data[tag.code]"
                  class="drawer-switch"
                  size="mini"
                  @change="switchChange(tag)"
                />
              </div>
              <fks-divider />
            </div>
          </div>
        </div>
      </fks-col>
    </fks-row>
    <div style="margin-bottom: 36px; text-align: center">
      <fks-button
        v-permission="['dataSafe:refresh']"
        icon="fks-icon-turn-right"
        @click="init()"
      >
        {{ LANG.REDUCTION }}
      </fks-button>
      <fks-button
        v-permission="['loginStrategy:update']"
        type="primary"
        icon="fks-icon-check"
        :loading="loading"
        @click="submit"
      >
        {{ LANG.UPDATE }}
      </fks-button>
    </div>
    <extra-way
      v-if="extraDialogVisible"
      :visible.sync="extraDialogVisible"
      :data="copyExtraData"
      :extra-type="extraType"
      :extra-ways="extraWays"
    />
  </div>
</template>
<script>
import Mix from '@/mixins/module'
import {
  PUT_CLIENT_CONFIG,
  GET_LATEST_CLIENT_CONFIG
} from '@/store/Action/actionTypes'
import { LATEST_CLIENT_CONFIG } from '@/store/State/stateTypes'
import { getExtraData } from '../../api'
import ExtraWay from './ExtraWay/index'
import { deepClone } from '@/utils/util'
import * as types from '@/store/Getter/getterTypes.js'
import { CAPTCHA_TYPE } from '@/config/enums'
import { captchaType } from '@/config'
export default {
  name: 'LoginStrategy',
  components: { ExtraWay },
  mixins: [Mix],
  data() {
    return {
      addressIndex: 0,
      timeIndex: 0,
      addTable: false,
      tableIndex: 0,
      timeInfo: '',
      info: '',
      addition: '',
      showAddress: false,
      showTime: false,
      showExtra: false,
      extraVisible: false,
      extraSetingVisible: false,
      extraData: [],
      extraWays: [],
      addressCurrentPage: 1,
      timeCurrentPage: 1,
      extraType: '',
      data: {},
      loading: false,
      isIndeterminate: true,
      allWay: false,
      extraDialogVisible: false,
      extraForm: {},
      copyExtraData: {},
      extraDetailData: {},
      extraDicData: [],
      form: {
        phone: false,
        extraWay: false,
        accessTokenValidity: 0, //登录有效期
        sessionValidTime: 0, //会话有效期
        deviceMultiple: false, //多设备
        useCaptcha: false, //验证码开启
        captchaType: captchaType,
        errorCount: 0,
        loginWays: [],
        secondFA: false, //双因子
        loginErrorLockNum: 0, //错误次数锁定
        loginErrorLockTime: 0 //锁定时间
      }
    }
  },
  computed: {
    // 行为验证码类型
    captchaTypes() {
      return [
        { label: this.LANG.CLICK_WORD, value: CAPTCHA_TYPE.CLICK_WORD },
        { label: this.LANG.BLOCK_PUZZLE, value: CAPTCHA_TYPE.BLOCK_PUZZLE }
      ]
    },
    extraWay() {
      return this.$store.state.enum.thirdParty
    },
    theme() {
      return this.$store.getters[types.THEME]
    },
    latestClientConfig() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    }
  },
  watch: {
    latestClientConfig(nval) {
      this.initForm(nval)
    }
  },
  async mounted() {
    await this.$store.dispatch(GET_LATEST_CLIENT_CONFIG)
    this.getExtraData()
  },
  methods: {
    changeExtraWay(val) {
      if (!val) {
        this.form.loginWays = []
        for (let key in this.data) {
          this.data[key] = false
        }
      }
    },
    //第三方应用卡片switch开关状态切换
    switchChange(data) {
      if (this.form.loginWays.length > 0) {
        if (this.isTrue(data)) {
          this.form.loginWays.splice(
            this.form.loginWays.map((item) => item.key).indexOf(data.code),
            1
          )
        } else {
          this.form.loginWays.push({ name: data[this.$lang], key: data.code })
        }
      } else {
        this.form.loginWays.push({ name: data[this.$lang], key: data.code })
      }
    },
    //判断是否为激活状态
    isTrue(val) {
      let w = false
      this.form.loginWays.forEach((item) => {
        if (item.key == val.code) {
          w = true
        }
      })
      return w
    },
    //加载第三方应用数据
    async getExtraData() {
      this.extraWays = []
      this.extraDicData = JSON.parse(JSON.stringify(this.extraWay))
      this.extraDicData.sort((v1, v2) => {
        let flag = -1
        this.form.loginWays.forEach((item) => {
          if (v2.code == item.key) {
            flag = 1
          }
        })
        return flag
      })
      this.data = {}
      //将开启的第三方应用switch置为开启状态
      this.form.loginWays.forEach((item) => {
        this.$set(this.data, item.key, true)
      })
    },
    init() {
      this.initForm(this.latestClientConfig)
      this.$message(this.LANG.REDUCTION_TIP)
    },
    // 初始化表单
    initForm(latestClientConfig) {
      let loginStrategy = deepClone(
        latestClientConfig.additionalInformation?.loginStrategy
      )
      this.form = { ...this.form, ...loginStrategy }
      this.form.accessTokenValidity =
        latestClientConfig.accessTokenValidity / 60
      this.form.loginWays = loginStrategy.loginWays || []
      this.form.loginErrorLockTime = loginStrategy.loginErrorLockTime / 60
      this.form.sessionValidTime = loginStrategy.sessionValidTime / 60
    },
    //打开编辑第三方应用信息弹窗
    async editExtra(data) {
      this.copyExtraData = {}
      await getExtraData()
        .then((res) => {
          this.extraDetailData = res.data ? res.data : []
        })
        .catch(() => {
          this.extraDetailData = []
        })
      this.copyExtraData = this.extraDetailData.find((item) => {
        return item.source == data.code
      })
      if (!this.copyExtraData) {
        this.copyExtraData = {}
        this.copyExtraData.clientName = data[this.$lang]
        this.copyExtraData.source = data.code
      }
      this.copyExtraData.clientId
        ? (this.extraType = 'edit')
        : (this.extraType = 'add')
      this.extraDialogVisible = true
    },
    /**
     * @description: 提交保存修改
     */
    submit() {
      this.loading = true
      let loginStrategy = JSON.parse(JSON.stringify(this.form))
      loginStrategy.loginErrorLockTime = loginStrategy.loginErrorLockTime * 60
      loginStrategy.sessionValidTime = loginStrategy.sessionValidTime * 60
      let accessTokenValidity = loginStrategy.accessTokenValidity * 60
      delete loginStrategy.accessTokenValidity
      let additionalInformation = {
        ...this.latestClientConfig.additionalInformation,
        loginStrategy
      }
      let settingsJSON = {
        ...this.latestClientConfig,
        additionalInformation,
        accessTokenValidity
      }

      this.$store
        .dispatch(PUT_CLIENT_CONFIG, settingsJSON)
        .then((res) => {
          // this.hasSubmitted = true
          this.loading = false
          if (res.status) {
            this.$message({
              type: 'success',
              message: this.LANG.UPDATE_SUCCESS
            })
          }
        })
        .catch((err) => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-button--medium {
  width: 96px;
  height: 40px;
}

.fks-col {
  min-width: 440px;
}

.extra {
  ::v-deep .fks-divider--horizontal {
    margin-left: 24px;
  }
}

::v-deep .fks-divider--horizontal {
  margin: 0;
}
::v-deep .fks-select {
  .fks-input__inner {
    border: none;
    background-color: rgba(239, 240, 245, 0.3);
  }
}
::v-deep .fks-input-number {
  span {
    background: #fff;
  }
}

.pw-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  padding-top: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .title {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    color: #191919;
  }

  .row-content-container {
    padding: 0 24px;
    margin: 24px 0 36px;
    border: 1px solid #eee;
    border-radius: 8px;

    .row-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;
    }
  }
}
</style>